<!-- 项目管理 -->
<template>
	<div class="t-wp" v-loading="state.loading">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form class="text-right" :model="state.queryParams" ref="queryForm" :inline="true">
				<!-- <el-form-item label="项目名称">
					<el-input v-model="state.queryParams.aaa" placeholder="请输入"/>
				</el-form-item>
				<el-form-item label="负责人">
					<el-input v-model="state.queryParams.bbb" placeholder="请输入"/>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
					</el-button-group>
				</el-form-item> -->
				<el-form-item>
					<el-button v-auth="'prg:add'" type="primary" icon="ele-Plus" @click="showAdd()"> 新增 </el-button>
					<el-button v-auth="'prg:export'" type="primary" @click="downFiles()">导出项目文件</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 8px">
			<el-table :data="state.list" style="width: 100%" border>
				<el-table-column type="index" label="序号" width="55" align="center" />
				<el-table-column prop="projectName" min-width="200px" label="项目名称" align="center" show-overflow-tooltip />
				<el-table-column prop="procurementMethod" min-width="150px" label="采购方式" align="center" show-overflow-tooltip />
				<el-table-column prop="budget" label="金额|元" width="100" align="center" show-overflow-tooltip />
				<el-table-column prop="budget" label="项目状态" width="100" align="center" show-overflow-tooltip>
					<template #default="scope">
						<div v-if="scope.row.status == 0">未完成</div>
						<b v-else style="color:#67C23A">已完成</b>
					</template>
				</el-table-column>
				<el-table-column prop="managerName" label="项目负责人" width="100" align="center" show-overflow-tooltip />

				<el-table-column prop="createTime" label="创建日期" width="180" align="center" show-overflow-tooltip />
				<el-table-column label="操作" width="400" align="center" fixed="right" show-overflow-tooltip>
					<template #default="scope">
						<el-button v-if="scope.row.budgetId" icon="ele-View" type="primary" text @click="showBudget(scope.row.budgetId)">预算</el-button>
						<el-button v-auth="'prg:edit'" icon="el-icon-edit" size="small" text type="primary" @click="showAdd(scope.row)">编辑</el-button>
						<el-button v-auth="'prg:del'" icon="el-icon-delete" size="small" text type="primary" @click="deleteRow(scope.row)">删除项目</el-button>
						<el-button v-if="scope.row.status == 0" v-auth="'prg:editform'" icon="el-icon-edit" size="small" text type="primary" @click="toFillInForm(scope.row)">填写表单</el-button>
						<el-button v-if="scope.row.status == 1" v-auth="'prg:view'" icon="ele-View" size="small" text type="primary" @click="toFillInForm(scope.row)">查看表单</el-button>
						<el-button v-if="scope.row.status == 1" v-auth="'prg:export'" icon="el-icon-edit" size="small" text type="primary" @click="downloadVoucher(scope.row)">导出凭证</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- <el-pagination
				v-model:currentPage="state.tableParams.page"
				v-model:page-size="state.tableParams.pageSize"
				:total="state.tableParams.total"
				:page-sizes="[10, 20, 50, 100]"
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
			/> -->
		</el-card>

		<div class="voucher-box">
			<div ref="voucherRef">
				<div class="title">项目报销凭证</div>
				<template v-if="state.voucherData">
					<div class="row">
						<div class="label">项目名称：</div>
						<div class="value">
							<div class="content">{{state.voucherData.projectName}}</div>
						</div>
					</div>
					<div class="row">
						<div class="label">项目负责人：</div>
						<div class="value">
							<div class="content">{{state.voucherData.manager}}</div>
						</div>
					</div>
					<div class="row">
						<div class="label">合同签订部门：</div>
						<div class="value">
							<div class="content">{{state.voucherData.projectDept}}</div>
						</div>
					</div>
					<div class="row">
						<div class="label">合同签订方名称：</div>
						<div class="value">
							<div class="content">{{state.voucherData.provider}}</div>
						</div>
					</div>
					<div class="row">
						<div class="label">签约金额：</div>
						<div class="value">
							<div class="content">{{state.voucherData.money}} 元</div>
						</div>
					</div>
					<div class="row" style="margin-top: 20px;">
						<div class="label">项目资料完成状态：</div>
						<div class="value">
							<div class="content">
								<div v-for="(text, index) in state.voucherData.phaseStatus" :key="index">{{text}}</div>
							</div>
						</div>
					</div>
					<div class="row" style="margin-top: 20px;">
						<div class="label">凭证生成时间：</div>
						<div class="value">
							<div class="content">{{dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}}</div>
						</div>
					</div>
				</template>
			</div>
		</div>

		<addModal ref="addModalRef" @reload="handleQuery"></addModal>
		<budgetDetail ref="budgetDetailRef"/>
	</div>
</template>

<script setup name="SupplierManage">
import { onMounted, reactive, ref } from 'vue';
import {useRouter, useRoute} from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import addModal from "./modules/addModal.vue";
import {$get, $post, $postparams} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";
import {downloadByUrl} from "/@/utils/download.ts";
import {downloadPDF} from "/@/utils/Tools.js"
import dayjs from "dayjs";
import budgetDetail from "/@/views/budgetManage/modules/detailModal.vue";

const router = useRouter();
const route = useRoute();
const addModalRef = ref();
const voucherRef = ref();
const budgetDetailRef = ref();
const oUserInfo = useUserInfo();

const PUBLIC_PATH = import.meta.env.VITE_PUBLIC_PATH;
const state = reactive({
	loading: false,
	queryParams: {
		aaa: '',
		bbb: '',
	},

	list: [],
	tableParams: {
		page: 1,
		pageSize: 20,
		total: 0,
	},

	// 凭证数据
	voucherData: null,
});

onMounted(async () => {
	handleQuery();
});

// 查询操作
const handleQuery = async () => {
	state.loading = true;
	var res = await $post('/projectService/getprojectall', 0);
	state.list = res.result;
	// state.tableParams.total = res.data.result?.total;
	state.loading = false;
};

// 重置操作
const resetQuery = () => {
	state.queryParams.aaa = '';
	state.queryParams.bbb = '';
	handleQuery();
};

// 改变页面容量
const handleSizeChange = (val) => {
	state.tableParams.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val) => {
	state.tableParams.page = val;
	handleQuery();
};

// 显示新增
const showAdd = (row) => {
	addModalRef.value.open(row?.id);
}

// 删除项目
const deleteRow = row => {
	ElMessageBox.confirm('此操作将删除该项目，是否继续？', '提示', {
		type: 'warning'
	}).then(async () => {
		var res = await $post('/projectService/removeproject', row.id);
		ElNotification({
	    title: '提示',
	    message: '删除成功',
	    type: 'success',
	  })
	  // 更新列表
	  handleQuery();
	})
}

// 填写表单
const toFillInForm = (row) => {
	localStorage.setItem('project_id', row.id);
	router.push({
		path: '/ProjectManage/fillInForm',
		query: {
			tabTitle: '项目-'+row.projectName
		}
	})
}

// 导出项目完成凭证
const downloadVoucher = (row) => {
	$post('/projectService/getrv/'+row.id).then(res => {
		state.voucherData = res.result;
		setTimeout(() => {
			downloadPDF(voucherRef.value, '项目报销凭证');
		}, 100);
	})
}

// 导出项目文件
async function downFiles() {
	var res = await $get('/projectService/getprojectfilesall');
	downloadByUrl({
		url: res.result
	})
}

// 显示预算详情
const showBudget = id => {
	budgetDetailRef.value.open(id);
}

</script>

<style lang="scss" scoped>
.t-wp {
	.voucher-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -100;
		opacity: 0;
		> div {
			width: 750px;
			height: 1080px;
			background: #fff;
			padding: 40px 100px 0;
			border: 1px solid #000;
		}
		.title {
			margin-bottom: 30px;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}
		.row {
			font-size: 16px;
			line-height: 24px;
			margin-bottom: 10px;
			&:after {
				content: '';
				display: block;
				clear: both;
			}
			.label {
				float: left;
				width: 10em;
				text-align: right;
			}
			.value {
				float: left;
			}
		}
	}
}
</style>
